<template>
  <div class="loginbind">
    <div @click="getBack" style="float:right;font-size:10px;">点击这里回登陆</div>

    <div class="cavs" v-if="isToast"></div>

    <div class="toast" v-if="isToast">
      <p style="width:70%;margin:2% auto;text-align:center;font-size:12px;">{{ Message }}{{Usr}}</p>
      <p style="width:70%;margin:2% auto;text-align:center;font-size:12px;">{{ UserUnit }}</p>
      <div class="close" @click="close">关闭</div>
    </div>
    <div class="header">
      <div class="bind">平台绑定</div>
    </div>

    <input type="text" class="stynum" placeholder="学/工号" v-model="UserName">
    <input type="text" class="password" placeholder="密码" v-model="PassWord">

    <button class="bindBtn" @click="bind">平台绑定</button>
  </div>
</template>

<script>
export default {
  name: "Loginbind",
  data() {
    return {
      isToast: false,
      UserName: "",
      PassWord: "",
      Url:"/api/UserValidate.ashx",//注意这里的路径
      Message:"",
      Usr:"",
      UserUnit:""
    };
  },
  methods: {
    getBack() {
      this.$router.push("/");
    },
    bind() {
      const Url = this.Url;
      const SchoolNum = 10574;
      const UserName = this.UserName;
      const PassWord = this.PassWord;
      if( UserName == '' || PassWord == ''){
        alert("信息不能为空！")
      }else{
          console.log(SchoolNum,UserName,PassWord)
        this.isToast = true;
        this.$http.post(
          Url,
          {
            SchoolNum:SchoolNum,
            UserName:UserName,
            PassWord :PassWord 
          }).then( result => {
            // console.log(result)
            let status = result.status;
            if( status == 200 ){
              this.Message = result.body.Message;
              this.Usr = result.body.UserName;
              this.UserUnit = result.body.UserUnit;
            }else{
               alert("请求失败！")
            }
          }
          ).catch( err =>{
            console.log(err)
          })
      }
    },
    close() {
      this.isToast = false;
    }
  }
};
</script>

<style scoped lang="scss">
.cavs {
  background: #9e9898;
  opacity: 0.5;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}
.close {
  color: #f87521;
  width: 100%;
  border-top: 0.5px solid #9e9898;
  line-height: 10%;
  font-size: 15px;
  text-align: center;
  padding: 6% 0 3%;
  position: relative;
  top: 35%;
}
.bind {
  color: #999999;
  width: 50%;
  margin: 0 25%;
  text-align: center;
}
.header {
  width: 90%;
  height: 20%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.stynum,
.password {
  padding-left: 1vw;
  height: 9%;
  width: 80%;
  margin: 3% 10%;
  border-radius: 5px;
  border: 0.5px solid #999999;
  box-shadow: 1px 1px 1px #999999;
}
.bindBtn {
  height: 12%;
  width: 60%;
  border-radius: 5px;
  background: #eb8543;
  border: none;
  outline: none; //消除默认点击蓝色边框效果
  color: #fff;
  margin: 7% 20%;
}
.bindBtn:active {
  background: #f87521;
}

// 移动端
@media screen and (max-width: 500px) {
  .loginbind {
    width: 80%;
    height: 90%;
    margin: 2% auto;
    font-size: 16px;
    .toast {
      width: 76%;
      height: 18%;
      position: fixed;
      left: 12%;
      top: 38%;
      background: #fff;
      z-index: 100;
      border-radius: 10px;
    }
  }
}

// pc端
@media screen and (min-width: 500px) {
  .loginbind {
    width: 30%;
    height: 100%;
    margin: 1% auto;
    font-size: 16px;
    .toast {
      width: 26%;
      height: 28%;
      position: fixed;
      left: 37%;
      top: 35%;
      background: #fff;
      z-index: 100;
      border-radius: 10px;
    }
  }
}
</style>
